<template>
  <LoadingGroup :pending="pending" :error="error">
    <template v-for="(v, idx) in data" :key="idx">
      <Banner :data="v.data" v-if="v.type == 'swiper'" />
      <ImageNav :data="v.data" v-else-if="v.type == 'icons'" />
      <ImageAd :data="v.data" v-else-if="v.type == 'imageAd'" />
      <ListCard
        :data="v.data"
        :type="v.listType"
        :title="v.title"
        v-else-if="v.type == 'promotion'"
      />
      <ListCard :data="v.data" :title="v.title" v-else-if="v.type == 'list'" />
    </template>
  </LoadingGroup>
</template>

<script setup>
useHead({
  title: "首页",
  meta: [
    { name: "keywords", content: "关键字seo" },
    { name: "description", content: "描述seo" },
  ],
});

const { pending, data, error } = await useIndexDataApi();

// 服务端时直接报错
if (import.meta.server && error.value) {
  throwError("/", error.value?.data?.data);
}
</script>

<style scoped></style>
